<template>
  <div class="gameModel">
  <!--添加功能的弹出框-->
        <div class="disFle">
        <el-button type="success" @click="dialogFormVisibleAdd = true" round style="margin-bottom:35px;">添加数据</el-button>
            <el-form ref="form"  label-width="80px" class="disPro">
               <el-form-item>
                  <el-input placeholder="提示类型查询" v-model="dataType.warnType" clearable></el-input>
               </el-form-item>
               <el-button type="primary" @click="searchProFunc" round style="margin-bottom:35px;margin-left:20px;">查询</el-button>
            </el-form>
        </div>
        <el-dialog title="添加信息" :visible.sync="dialogFormVisibleAdd">
        <el-form :model="form">
          <el-form-item label="提示类型" :label-width="formLabelWidth">
            <el-input v-model="warnType" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="提示内容" :label-width="formLabelWidth">
            <el-input v-model="warnContent" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
          <el-button type="primary" @click="saveUserMessage">确 定</el-button>
        </div>
      </el-dialog>
      <div style="width:1015px;">
         <el-table
           id="tablePro"
            border
          :data="proMessageData.list"
          max-height="430">
          <el-table-column
            fixed
            type="index"
            label="id"
            width="200">
          </el-table-column>
          <el-table-column
            prop="warnType"
            label="提示类型"
            width="250">
          </el-table-column>
          <el-table-column
            prop="warnContent"
            label="提示内容"
            width="300">
          </el-table-column>
         <el-table-column
            fixed="right"
            label="操作"
            width="230"
            style="padding-left:80px;"
            >
            <template slot-scope="scope">
                  <el-button size="mini" @click="change(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="deleteMessage(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
         <div class="block" style="width:1020px;text-align: right;padding: 10px;">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="proMessageData.pageNumber"
              :page-size="proMessageData.pageSize"
              layout="total, prev, pager, next"
              :total="proMessageData.totalRow">
            </el-pagination>
          </div>
      <!--对话框-->
      <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="提示类型" :label-width="formLabelWidth">
               <el-input v-model="modelMessage.warnType" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="提示内容" :label-width="formLabelWidth">
              <el-input v-model="modelMessage.warnContent" type="textarea" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveMessage()">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataType:{
          warnType:''
        },
        warnType:'',
        warnContent:'',
        savepromptMessage:'',
        dialogFormVisibleAdd: false,
        dialogFormVisible: false,
        pageSize: 3,
        pageNumber: 1,
        lottertyId: undefined,
        proMessageData: [
            // pageSize:5
        ],
        forms:{
           name: '',
          payMatods:'',
          preStatus:'',
          date: '',
          pageSize: 6,
          pageNumber: 1,
          lottertyId: undefined
        },
        modelMessage:'',
        formAdd: '',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      }
    },
    created(){
      this.getmessData();
      
    },
    methods: {
      // 分页
       handleCurrentChange (val) {
        this.forms.pageNumber = val
        this.getmessData()
      },
        // 获取数据
      getmessData() {
          this.$api.getMessage(this.forms).then(res=>{
            if(res.code=='000000'){
               this.proMessageData = res.data;
               console.log('888888888')
               console.log(this.proMessageData)
            }
          })
      },
    change(row){
      this.modelMessage = row.warnContent;
      // this.modelMessage = row.warnType;
      var obj = {};
      obj.warnContent = row.warnContent;
      obj.warnType = row.warnType;
      obj.id = row.id;
      this.modelMessage = obj;
      this.dialogFormVisible = true;
    },
    // 修改功能函数
    saveMessage(){
      console.log(this.modelMessage)
        this.$api.saveproMessage(this.modelMessage).then(res => {
          if (res.code === '000000') {
            this.$message.success('修改成功')
            this.getmessData()
            this.dialogFormVisible = false
          }
        })

    },
    // 添加数据函数
    saveUserMessage(){
      var objM = {};
      objM.warnType = this.warnType;
      objM.warnContent = this.warnContent;
      // this.savepromptMessage = objM;
      this.$api.savepromptFunction(objM).then(res=>{
        if(res.code==='000000'){
          this.$message.success('添加数据成功！')
          this.dialogFormVisibleAdd = false;
          this.getmessData();
        }
      })
    },
    // 删除功能函数
    deleteMessage(id){
      // console.log(id)
        this.$confirm('您确定要删除该商户吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deletepromptFunction(id).then(res => {
            console.log(id)
            if (res.code === '000000') {
              this.$message.success('删除成功')
              this.getmessData()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 查询功能函数
    searchProFunc(){
      console.log('OOOOOOOOOOOO')
      console.log(this.dataType)
      this.$api.searchProFunc(this.dataType).then(res => {
            if (res.code === '000000') {
               console.log('888>>>>>>')
               console.log(res.data.list)
                if(res.data.list.length==0){
                  console.log('?????????????')
                this.$alert('该提示类型不存在', '查询错误', {dangerouslyUseHTMLString: true});
              } else{
                if(this.dataType.warnType.length>0){
                  this.proMessageData = res.data;
                }else{
                  this.getmessData();
                }
              }
               
              // this.$message.success('删除成功')
              // this.getmessData()
            }
          })
      
    }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.disFle{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  width:1015px;
}
.el-form-item__label{
    width:160px!important;
  }
.el-form-item__content{
    margin-left: 180px!important;
  }
.disPro{
  display:flex;
  flex-wrap:wrap;
}
  .gameModel{
    margin:20px;
  }
</style>
